﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<title>Rain CSS > Table</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>

<body class="body">
	<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
  </div>
	<div class="headerM headerGrey">
  	<div class="container posr">
    	<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
  </div>
  
	<div class="container mt"> 
    <div class="content"> 
    	<div class="sidebar l posr">
      	<div class="sidebox">
      	<h2 class="category">Default Table with CSS</h2>
      	<p>These table examples extend from blueprint framwork,and can can new style by table class</p>
        </div>
      </div>
      
      <div class="main mainRight posr">
				<table class="table mb" summary="Default Table Style">
				  <caption class="bglgrey2">Default Table Style,use class ".table"</caption>
					<thead>
				  <tr>
				    <th>Title 1</th>
				    <th>Title 2</th>
				    <th>Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
					</tbody>
				</table>
        
        <table class="table-2 mb" summary="Table Style 2">
          <caption class="bglgrey2">Table Style 2,use class ".table-2"</caption>
					<thead>
				  <tr>
				    <th>Title 1</th>
				    <th>Title 2</th>
				    <th>Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
					</tbody>
        </table>
        
        <table class="table-3 mb" summary="Table Style 3">
          <caption class="bglgrey2">Table Style 3,use class ".table-3"</caption>
					<thead>
				  <tr>
				    <th>Title 1</th>
				    <th>Title 2</th>
				    <th>Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
					</tbody>
        </table>
        
        <table class="table-4 mb" summary="Table Style 4">
          <caption class="bglgrey2">Table Style 4,use class ".table-4"</caption>
					<thead>
				  <tr>
				    <th>Title 1</th>
				    <th>Title 2</th>
				    <th>Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
					</tbody>
        </table>
        
        <table class="table-5 mb" summary="Table Style 5">
          <caption class="bglgrey2">Table Style 5,use class ".table-5"</caption>
					<thead>
				  <tr>
				    <th>Title 1</th>
				    <th>Title 2</th>
				    <th>Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
					</tbody>
        </table>
				
        <table class="table-6 mb" summary="Table Style 6">
          <caption class="bglgrey2">Table Style 6,use class ".table-6"</caption>
					<thead>
				  <tr>
				    <th>Title 1</th>
				    <th>Title 2</th>
				    <th>Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
					</tbody>
        </table>
				
        <table class="table-7 mb" summary="Table Style 7">
          <caption class="bglgrey2">Table Style 7,use class ".table-7"</caption>
					<thead>
				  <tr>
				    <th>Title 1</th>
				    <th>Title 2</th>
				    <th>Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
					</tbody>
        </table>
				
        <table class="table-8 mb" summary="Table Style 8">
          <caption class="bgWhite">Table Style 8,use class ".table-8"</caption>
					<thead>
				  <tr>
				    <th class="bgLightGrey">Title 1</th>
				    <th class="bgLightGrey">Title 2</th>
				    <th class="bgLightGrey">Title 3</th>
				  </tr>
					</thead>
					<tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				</tbody>
        </table>
				
        <table class="table-9 mb" summary="Table Style 9">
          <caption class="bgWhite">Table Style 9,use class ".table-9"</caption>
				<thead>
				  <tr>
				    <th class="bgLightGrey">Title 1</th>
				    <th class="bgLightGrey">Title 2</th>
				    <th class="bgLightGrey">Title 3</th>
				  </tr>
                </thead>
                <tbody>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				  <tr>
				    <td>field</td>
				    <td>field</td>
				    <td>field</td>
				  </tr>
				</tbody>
        </table>
      </div>
    <footer class="footer socialFooter c borderTop">
	    <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
	    <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
    </footer>  
    </div>
  </div>
</body>
</html>
